﻿<div id="dlg_CondicionMontoMedioPago" title="Condición por Monto del Medio de Pago">
    <div class="col-sm-12">
        <div class="col-sm-12 no-padding">
            <div class="col-sm-12 no-padding">
                <label>Tipo de Medio de Pago</label>
                <input id="ddl_MontoMedPago_Tipo" data-role="dropdownlist" data-value-primitive="true" data-option-label="Seleccione"
                    data-bind="value: MontoMedPago.IdMedioPago, source: medioPagoDS, events: {change: OnChange}" data-value-field="IdMedioPago" data-text-field="Nombre" style="width: 100%" />
            </div>
        </div>

        <div class="space-10"></div>

        <div class="col-sm-12 well">
            <div class="row col-sm-12">
                <label>Condición</label>
            </div>

            <div class="row col-sm-12">
                <div class="col-sm-9">
                    <label>Monto para cumplir la condición </label>
                </div>

                <div class="col-sm-3 no-padding">
                    <input id="txt_MontoMedPago_MontoPago" class="form-control focused align-right" type="text" data-bind="value: MontoMedPago.Monto, enabled: isEnabled">
                </div>
            </div>

            <div class="row col-sm-12">
                <label class="col-sm-12 no-padding">El benecio se otorga cuando:</label>

                <div class="col-sm-12">
                    <label class="checkbox inline">
                        <input type="checkbox" value="option1" id="chk_MontoMedPago_CumpleCondicion" data-bind="checked: MontoMedPago.CumpleCondicion, enabled: isEnabled">
                        Cada vez que se cumpla la condición
                    </label>

                    <label class="checkbox inline">
                        <input type="checkbox" value="option1" id="chk_MontoMedPago_MayorCondicion" data-bind="checked: MontoMedPago.MayorCondicion, enabled: isEnabled">
                        El valor es mayor o igual a la condición
                    </label>
                </div>
            </div>
        </div>

        <div class="col-sm-12 align-center">
            <div class="space-4"></div>
            <button id="btn_MontoMedPago_Aceptar" class="btn btn-sm btn-primary" data-bind="click: OnAccept">Aceptar</button>
            <button id="btn_MontoMedPago_Cancelar" class="btn btn-sm btn-default" data-bind="click: OnCancel">Cancelar</button>
        </div>
    </div>
</div>

<script>
    var CondicionMontoMedPagoVM;

    $(document).ready(function () {
        $("#dlg_CondicionMontoMedioPago").on("dialogopen", function (e, ui) {
            CondicionMontoMedPagoVM = new kendo.observable({
                MontoMedPago: {
                    IdTipoCondicion: null,
                    Codigo: null,
                    IdMedioPago: null,
                    Monto: 0,
                    CumpleCondicion: false,
                    MayorCondicion: false,
                    Status: null,
                    MedioPago: { Nombre: null },
                    Servicio: null,
                    Subtipo: null,
                    VariablePromocional: null
                },
                medioPagoDS: AjaxParamsActionPost('@Url.Action("GetEntities", "MedioPago")', { 'rowStatus': true }),
                isEnabled: false,
                toJSON: function () {
                    return kendo.data.ObservableObject.prototype.toJSON.call(this.MontoMedPago);
                },

                /* start: Control events */
                OnInit: function () {
                    this.MontoMedPago.set('IdTipoCondicion', null);
                    this.MontoMedPago.set('IdMedioPago', null);
                    this.MontoMedPago.set('Monto', 0);
                    this.MontoMedPago.set('CumpleCondicion', false);
                    this.MontoMedPago.set('MayorCondicion', false);
                    this.MontoMedPago.set('Status', null);
                    this.MontoMedPago.set('MedioPago.Nombre', null);
                    this.MontoMedPago.set('Servicio', null);
                    this.MontoMedPago.set('Subtipo', null);
                    this.MontoMedPago.set('VariablePromocional', null);

                    this.set('isEnabled', false);
                },
                OnChange: function () {
                    var $ddl = $('#ddl_MontoMedPago_Tipo').data('kendoDropDownList');

                    $ddl.select() > 0 ? this.set('isEnabled', true) : this.set('isEnabled', false);
                    this.MontoMedPago.MedioPago.set('Nombre', $ddl.text());
                },
                OnAccept: function () {
                    debugger
                    this.MontoMedPago.set('IdTipoCondicion', SeleccionarCondicionVM.Helper.get('IdTipoCondicion'));
                    this.MontoMedPago.set('Codigo', SetNewCode(PromocionVM.condicionesResultDS, 'Codigo'));
                    this.MontoMedPago.set('Status', 1);
                    PromocionVM.condicionesResultDS.push(this.toJSON());

                    $('#dlg_CondicionMontoMedioPago').dialog('close');
                },
                OnCancel: function () {
                    this.OnInit();
                    SeleccionarCondicionVM.Helper.set('IdTipoCondicion', null);
                    $('#dlg_CondicionMontoMedioPago').dialog('close');
                }
                /* end: Control events*/
            });

            kendo.bind('#dlg_CondicionMontoMedioPago', CondicionMontoMedPagoVM);
        });
    });
</script>
